<template>
  <div class="home">
    <!-- 顶部nav区域 -->
    <nav-bar ref="navBar">
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">图书兄弟</span>
      </template>
    </nav-bar>
    <!-- 导航栏控制 -->
    <tab-control
      :tabContext="tabContext"
      @changeTab="changeTab"
      v-show="tabControlIsShow"
      class="home-tab-control"
      ref="tabControlTop"
    />
    <!-- BScroll插件的二次封装 -->
    <scroll class="scroll" @pullingUp="pullingUp" :pullUpLoad="true" :probeType="3" @scroll="scroll" ref="myScroll">
      <div ref="tabControlShowScrollHeight">
        <!-- banner图区域 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banners" :key="item.id">
            <img :src="item.img_url" alt="" />
            <!-- <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" /> -->
          </van-swipe-item>
        </van-swipe>
        <!-- 推荐图书区域 -->
        <recommend-view :recommends="recommends" />
      </div>
      <!-- 导航栏控制 -->
      <tab-control :tabContext="tabContext" @changeTab="changeTab" ref="tabControl" />
      <!-- 商品列表区域  -->
      <goods-list :goodslist="goodslist" />
    </scroll>
    <!-- 全剧组件BackTop -->
    <back-top @backTop="backTop" v-show="isBackTopShow" />
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
// hooks相关
import UseHomeData from 'hooks/home/UseHomeData'
import UseHomeTypeData from 'hooks/home/UseHomeTypeData'
import UseTabControlShow from 'hooks/home/UseTabControlShow'
import useScroll from 'hooks/scroll/useScroll'

// 组件
import RecommendView from './ChildComps/RecommendView.vue'
import TabControl from 'components/content/tabControl/TabControl.vue'
import GoodsList from 'components/content/goods/GoodsList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
// : () => import('./ChildComps/RecommendView.vue')
export default {
  components: { RecommendView, TabControl, GoodsList, Scroll },
  name: 'Home',
  setup() {
    // 拿到scroll的组件实例
    const myScroll = ref(null)
    useScroll(myScroll)
    // 获取home请求的数据 banners的数据从其中返回
    const homeData = UseHomeData()
    // 获取商品列表数据
    const homeTypeData = UseHomeTypeData()
    //引用了分类控制栏的显示与隐藏
    const TabControlShow = UseTabControlShow()
    // 自定义tabContorl的内容
    const tabContext = reactive(['畅销', '新书', '精选'])
    // 定义回到顶部的方法
    function backTop() {
      // 调用Bs的滚动到某个位置方法
      myScroll.value.scrollTo(0, 0, 1000)
    }
    return {
      ...toRefs(homeData),
      ...toRefs(homeTypeData),
      ...toRefs(TabControlShow),
      tabContext,
      backTop,
      myScroll
    }
  }
}
</script>

<style lang="scss" scoped>
.home-tab-control {
  position: fixed;
  top: 0.44rem;
  left: 0;
  right: 0;
}
.scroll {
  height: calc(100vh - 0.44rem - 0.49rem);
}

.my-swipe .van-swipe-item {
  height: 1.5rem;
  color: #fff;
  line-height: 1.5rem;
  img {
    height: 100%;
    width: 100%;
  }
}
</style>